<div class="container" ng-init="getDestinos()" style="background: rgba(0,0,0,0.3)">
            <form name="newHotel" class="form-horizontal" role="form">
                <h1 class="legendWhite">Nuevo Hotel</h1>
                <fieldset>
                    <!-- Form Name -->
                    <legend class="legendWhite">Información General</legend>

                    <div class="form-group">
                        <label class="col-sm-2 control-label legendWhite" for="codigo">Codigo</label>
                        <div class="col-sm-4">
                            <input type="text" ng-model="hotel.codigo" id="codigo" name="codigo" class="form-control" required ng-pattern="/^[0-9]+$/">
                            <span class="hint-block" style="color: white" ng-show="newHotel.codigo.$error.pattern">Only numbers.</span>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label legendWhite" for="nombre">Nombre</label>
                        <div class="col-sm-4">
                            <input type="text" ng-model="hotel.nombre"id="nombre" class="form-control" required>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label legendWhite" for="cadena">Cadena</label>
                        <div class="col-sm-4">
                            <input type="text" id="cadena" ng-model="hotel.cadena" class="form-control" required>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label legendWhite" for="calificacion">Calificación</label>
                        <div class="col-sm-4">
                            <select  ng-model="hotel.calificacion" type="text" style="width: 360px; height: 34px; text-align: center;" class="input-large" id="calificacion" required>
                                <option value="1">1 Estrella</option>
                                <option value="2">2 Estrellas</option>
                                <option value="3">3 Estrellas</option>
                                <option value="4">4 Estrellas</option>
                                <option value="5">5 Estrellas</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label legendWhite" for="cInterna">Calif. Interna</label>
                        <div class="col-sm-4">
                            <select  ng-model="hotel.calificacionInterna"  type="text" style="width: 360px; height: 34px; text-align: center;" class="input-large" id="cInterna" required>
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label legendWhite" for="estado">Estado</label>
                        <div class="col-sm-4">
                            <select  ng-model="hotel.estado"  type="text" style="width: 360px; height: 34px; text-align: center;" class="input-large" id="estado" required>
                                <option value="Activo">Activo</option>
                                <option value="Inactivo">Inactivo</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label legendWhite" for="descripcion">Descripción</label>
                        <div class="col-sm-4">
                            <textarea rows="4" cols="50" type="text" ng-model="hotel.descripcion" id="descripcion" class="form-control" required></textarea>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label legendWhite" for="imagenes">Imagen/es</label>
                        <div class="col-sm-4">
                            <div class="input-group">
                                <span class="input-group-btn">
                                    <span class="btn btn-primary btn-file">
                                        Buscar&hellip; <input ng-model="hotel.files" type="file" multiple>
                                    </span>
                                </span>
                                <input type="text" class="form-control" readonly>
                            </div>
                        </div>
                    </div>



                    <!-- Form Name -->
                    <legend class="legendWhite">Información de Contacto</legend>


                    <div class="form-group">
                        <label class="col-sm-2 control-label legendWhite" for="sitioWeb">Pagína Web</label>
                        <div class="col-sm-4">
                            <input type="url" id="sitioWeb"  name="sitioWeb" ng-model="hotel.web" class="form-control" required>
                            <span class="hint-block" style="color: white" ng-show="newHotel.sitioWeb.$error.url">Ej: http://www.dominio.com</span>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label legendWhite" for="email">Email</label>
                        <div class="col-sm-4">
                            <input type="email" id="email" name="email" ng-model="hotel.email" class="form-control" required>
                            <span class="hint-block" style="color: white" ng-show="newHotel.email.$error.email"">Ej: nombre@empresa.com</span>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label legendWhite" for="telefono">Teléfono</label>
                        <div class="col-sm-4">
                            <input type="text" id="telefono" name="telefono" ng-model="hotel.tel" class="form-control" required ng-pattern="/^[0-9]+$/">
                            <span class="hint-block" style="color: white" ng-show="newHotel.telefono.$error.pattern">Only numbers.</span>
                        </div>
                    </div>

                    <!-- Form Name -->
                    <legend class="legendWhite">Información Geográfica</legend>

                    <!-- Text input-->
                    <div class="form-group">
                        <label class="col-sm-2 control-label legendWhite" for="direccion">Dirección</label>
                        <div class="col-sm-4">
                            <input type="text" id="direccion" ng-model="hotel.direccion" class="form-control" required>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label legendWhite" for="cpostal">C.P.</label>
                        <div class="col-sm-4">
                            <input type="text" id="cpostal" ng-model="hotel.cp" class="form-control" required>
                        </div>
                    </div>

                    <!-- Text input-->
                    <div class="form-group">
                        <label class="col-sm-2 control-label legendWhite" for="destino">Destino</label>
                        <div class="col-sm-4">
                            <select  placeholder="Destino" type="text" style="width: 360px; height: 34px; text-align: center;" ng-model="hotel.destino" class="input-large" id="destino" ng-options="destino.id as destino.ciudad group by destino.pais for destino in destinos" required>
                            </select>
                        </div>
                    </div>

                    <!-- Form Name -->
                    <legend class="legendWhite">Servicios</legend>
                    <div class="form-group">
                        <label class="col-sm-2 control-label legendWhite" for="destino">Wi-Fi</label>
                        <div class="col-sm-4">
                            <input type="checkbox" ng-model="hotel.wifi" style=" height: 27px; width: 20px; ">
                        </div>
                        <label class="col-sm-2 control-label legendWhite" for="destino">Pileta</label>
                        <div class="col-sm-4">
                            <input type="checkbox" ng-model="hotel.pileta" style=" height: 27px; width: 20px; ">
                        </div>
                        <label class="col-sm-2 control-label legendWhite" for="destino">Aire Acondicionado</label>
                        <div class="col-sm-4">
                            <input type="checkbox" ng-model="hotel.aireAcondicionado" style=" height: 27px; width: 20px; ">
                        </div>
                        <label class="col-sm-2 control-label legendWhite" for="destino">Cochera</label>
                        <div class="col-sm-4">
                            <input type="checkbox" ng-model="hotel.cochera" style=" height: 27px; width: 20px; ">
                        </div>
                        <label class="col-sm-2 control-label legendWhite" for="destino">Business Center</label>
                        <div class="col-sm-4">
                            <input type="checkbox" ng-model="hotel.bCenter" style=" height: 27px; width: 20px; ">
                        </div>
                        <label class="col-sm-2 control-label legendWhite" for="destino">Serv. de traslado</label>
                        <div class="col-sm-4">
                            <input type="checkbox" ng-model="hotel.sTraslado" style=" height: 27px; width: 20px; ">
                        </div>
                        <label class="col-sm-2 control-label legendWhite" for="destino">Pileta Climatizada</label>
                        <div class="col-sm-4">
                            <input type="checkbox" ng-model="hotel.pClimatizada" style=" height: 27px; width: 20px; ">
                        </div>
                        <label class="col-sm-2 control-label legendWhite" for="destino">Spa</label>
                        <div class="col-sm-4">
                            <input type="checkbox" ng-model="hotel.spa" style=" height: 27px; width: 20px; ">
                        </div>
                        <label class="col-sm-2 control-label legendWhite" for="destino">Gimnasio</label>
                        <div class="col-sm-4">
                            <input type="checkbox" ng-model="hotel.gym" style=" height: 27px; width: 20px; ">
                        </div>
                        <label class="col-sm-2 control-label legendWhite" for="destino">Sauna</label>
                        <div class="col-sm-4">
                            <input type="checkbox" ng-model="hotel.sauna" style=" height: 27px; width: 20px; ">
                        </div>
                        <label class="col-sm-2 control-label legendWhite" for="destino">Hidromasaje</label>
                        <div class="col-sm-4">
                            <input type="checkbox" ng-model="hotel.hidromasaje" style=" height: 27px; width: 20px; ">
                        </div>
                        <label class="col-sm-2 control-label legendWhite" for="destino">Restaurante</label>
                        <div class="col-sm-4">
                            <input type="checkbox" ng-model="hotel.restaurante" style=" height: 27px; width: 20px; ">
                        </div>
                    </div>

                    <!-- Form Name -->
                    <legend class="legendWhite">Habitaciones</legend>

                    <div class="form-group">
                        <div class="row clearfix" style=" margin-left: 50px; ">
                            <div class="col-md-11 column">
                                <table class="table" id="tab_logic">
                                    <thead style="color:white">
                                    <tr >
                                        <th class="text-center">
                                            #
                                        </th>
                                        <th class="text-center">
                                            Nombre
                                        </th>
                                        <th class="text-center">
                                            Cap. Mínima
                                        </th>
                                        <th class="text-center">
                                            Cap. Máxima
                                        </th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr id='addr0'  name="row">
                                        <td>
                                            <input type="text" placeholder='Id' class="form-control id"/>
                                        </td>
                                        <td>
                                            <input type="text"  placeholder='Nombre' class="form-control nombre"/>
                                        </td>
                                        <td>
                                            <input type="text"  placeholder='Capacidad Mínima' class="form-control cMinima"/>
                                        </td>
                                        <td>
                                            <input type="text" placeholder='Capacidad Máxima' class="form-control cMaxima"/>
                                        </td>
                                    </tr>
                                    <tr id='addr1' name="row"></tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <a id="add_row" class="btn btn-default pull-left" style=" margin-left: 60px; ">Agregar Habitación</a>
                        <a id='delete_row' class="pull-right btn btn-default" style=" margin-right: 94px; ">Eliminar Habitación</a>
                    </div>
                    <br/>
                    <br/>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <div class="pull-right">
                                <button class="btn btn-default">Cancel</button>
                                <button  ng-disabled="!newHotel.$valid" ng-click="createNewHotel(hotel)" class="btn btn-primary">Save</button>
                            </div>
                        </div>
                    </div>

                </fieldset>
            </form>
</div>

<script>
    $(document).on('change', '.btn-file :file', function() {
        var input = $(this),
                numFiles = input.get(0).files ? input.get(0).files.length : 1,
                label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
        input.trigger('fileselect', [numFiles, label]);
    });

    $(document).ready( function() {
        $('.btn-file :file').on('fileselect', function(event, numFiles, label) {

            var input = $(this).parents('.input-group').find(':text'),
                    log = numFiles > 1 ? numFiles + ' archivos seleccionados' : label;

            if( input.length ) {
                input.val(log);
            } else {
                if( log ) alert(log);
            }

        });
    });

    $(document).ready(function(){
        var i=1;
        $("#add_row").click(function(){
            $('#addr'+i).html("<td><input  type='text' placeholder='Id' class='form-control  id'  /> </td><td><input type='text' placeholder='Nombre' class='form-control  nombre'  /> </td><td><input  type='text' placeholder='Capacidad Mínima'  class='form-control  cMinima'></td><td><input  type='text'  placeholder='Capacidad Máxima'  class='form-control  cMaxima'></td>");

            $('#tab_logic').append('<tr name="row" id="addr'+(i+1)+'"></tr>');
            i++;
        });
        $("#delete_row").click(function(){
            if(i>1){
                $("#addr"+(i-1)).html('');
                i--;
            }
        });

    });
</script>